

/* 
    获取元素
*/
let input=document.querySelectorAll('input')
let img=document.querySelectorAll('img')

let user=document.querySelector('#user')
let tel=document.querySelector('#tel')    //验证手机号
let code=document.querySelector('#code') //验证验证码
let pwd=document.querySelector('#pwd')    //验证密码

let check=document.querySelector('#check')
let btn1=document.querySelector('#btn1')


let icon=document.querySelectorAll('#icon')

//验证提示信息

let usericon=document.querySelector('.user-icon')
let telicon=document.querySelector('.tel-icon')
let yzicon=document.querySelector('.yz-icon')
let pwdicon=document.querySelector('.pwd-icon')





/* 
    需求1：点击input框的时候我们要让框的颜色改变同时出现×的按钮
*/
input.forEach(function(dom,i){
    dom.addEventListener('input',function(){
        if(dom.value.length !=0){
            icon.forEach(function(dom2){
                dom2.style.display='block'

            })
            dom.style.borderColor='#005be0'
        }else{
            icon.forEach(function(dom2){
                dom2.style.display='none'
            })
            dom.style.borderColor='#ccc'
        }
    })

})





/* 
    需求2：点击删除图标的时候我们要清空输入框内容，同时隐藏自己
*/
img.forEach(function(dom2){
    dom2.addEventListener('click',function(){
        dom2.previousElementSibling.value=''
        dom2.style.display='none'
    })
})


/* 
    需求3：点击删除图标的时候我们要清空输入框内容，同时隐藏自己
*/


/* 
    需求4：checkbox为选中的时候 注册按钮背景颜色变成蓝色，字变成白色
*/

let count=0
check.addEventListener('click',function(){
    //偶数
    btn1.style.background='skyblue'
    count++
    if(count%2===0){
        btn1.style.background='#ccc'
    }
})


/*  */


/**
 * 定义正则表达式
 */

//创建手机号验证规则-正则表达式
let telReg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/

//创建密码验证规则-正则表达式
let pwdReg = /^\d{6}$/ //6位数字

//创建用户名的正则表达式
let userReg = /^[\w]{6,12}$/

//验证验证码是否为4位数字
let yzReg=/^d{4}$/

/**
 * 8.手机号失去焦点时,验证手机号是否合法
 */
tel.addEventListener('blur', function () {


  //使用reg验证输入信息是否正确 == 布尔值
  let bool = telReg.test(tel.value)

  //判断
  if (bool) {
    //正确
    telicon.textContent = ''
  } else {
    //错误
    telicon.textContent = '⚠ 请输入正确手机号'
  }

})


/**
 * 9.密码失去焦点时,验证密码是否合法
 */
pwd.addEventListener('blur', function () {

  //使用reg验证输入信息是否正确 == 布尔值
  let bool = pwdReg.test(pwd.value)

  //判断
  if (bool) {
    //正确
    pwdicon.textContent = ''
  } else {
    //错误
    pwdicon.textContent = '⚠ 请输入6位的数字密码'
  }

})

/**
 * 10.用户名失去焦点时,验证密码是否合法
 */
user.addEventListener('blur', function () {

    //使用reg验证输入信息是否正确 == 布尔值
    let bool = userReg.test(user.value)
  
    //判断
    if (bool) {
      //正确
      usericon.textContent = ''
    } else {
      //错误
      usericon.textContent = '⚠ 昵称需在6~12位字母数字间'
    }
  
  })
  
/**
 * 11.验证码失去焦点时,验证验证码是否合法
 */
code.addEventListener('blur', function () {

    //使用reg验证输入信息是否正确 == 布尔值
    let bool = yzReg.test(code.value)
  
    //判断
    if (bool) {
      //正确
      yzicon.textContent = ''
    } else {
      //错误
      yzicon.textContent = '⚠ 请输入四位手机验证码'
    }
  
  })



